<template>
	<view class="device">
		<u-navbar title="孪生道具" bgColor="#ffffff" safeAreaInsetTop :placeholder="true" leftIconColor="#000000"
			@leftClick="back" titleStyle="{fontSize: 16px;font-weight: bold;color: #000000;}">
			<view class="u-nav-slot f-base bold flex-no-horizontal" slot="right" style="position: relative;">
				<!-- <u-image src="/static/img/device-filter.png" width="16" height="16"
					@click="isShowMenu = !isShowMenu"></u-image> -->
				<image src="/static/img/device-filter.png" @click="isShowMenu = !isShowMenu" style="width: 16px; height: 16px;" mode=""></image>
				<uni-transition :show="isShowMenu" mode-class="fade">
					<view class="menu">
						<view class="f-xs menu-item text-center" :class="index !== current ? 'grey': ''"
							v-for="(item, index) in menuList" :key="index" @click="onScreen(item, index)">{{item.name}}
						</view>
					</view>
				</uni-transition>
			</view>
		</u-navbar>
		<view :class="isShowMenu ? 'screenSuccess' : ''" @tap="isShowMenu = false" class="screenBck"></view>
		<view class="p-20">
			<view class="flex-no-horizontal between list">
				<view class="device-item m-b-20" v-if="deviceList" v-for="item in deviceList" :key="item.id"
					:class="usedId == item.id ? 'used' : ''">
					<view class="up" @click="handleClick(item.condition, item.id)">
						<image :src="item.gradeImage"></image>
						<view class="tip">LV{{item.level}}</view>
						 <!-- 铸造:2 -->
						<view class="tip2"
							:class="item.condition === 0 ? 'inactive' : ''">
							<text
								class="tip2-text">{{!item.condition ? '未激活' : '' }}</text>
						</view>
						<!-- <view class="tip2"
							:class="item.condition === 0 ? 'inactive' : item.condition === 2 ? 'expires': ''">
							<text
								class="tip2-text">{{!item.condition ? '未激活' : item.condition === 1 ? '已激活' : '已失效' }}</text>
						</view> -->
					</view>
					<view class="down">
						<view class="m-b-5 flex-no-horizontal between">
							<text class="f-base">{{item.name}}#{{item.number}}</text>
							<text class="grey" style="font-size: 10px;">可用{{item.restDay}}天</text>
						</view>
						<!-- <view class="flex-no-horizontal progress">
							<u-line-progress :percentage="item.experience/item.levelExperience * 100"
								inactiveColor="white" :showText="false" height="16"></u-line-progress>
							<view style="font-size: 10px;" class="grey percentage">LV{{item.level}}
								{{item.experience}}/{{item.levelExperience}}
							</view>
						</view> -->
						<u-button color="#5CC9FF" shape="circle" customStyle="height:64rpx;" class="m-t-10"
							@click="toMassage(item.id)" v-if="usedId == item.id">使用中</u-button>
						<template v-else>
							<u-button color="#5CC9FF" shape="circle" customStyle="height:64rpx;" class="m-t-10"
								@click="toMassage(item.id)" v-if="item.condition === 1">艾灸</u-button>
							<u-button color="#5CC9FF" shape="circle" customStyle="height:64rpx;" class="m-t-10"
								v-else-if="item.condition === 2" @click="toFixed(item.id)">续期</u-button>
							<u-button color="#5CC9FF" shape="circle" customStyle="height:64rpx;" class="m-t-10" v-else
								@click="toAcivation(item.id)">立即激活</u-button>
						</template>
					</view>
				</view>
			</view>
			<view v-if="loadingType" class="emptys">
				<u-empty :show="loadingType" textSize="15" :text="tipsFont" mode="data" width="240" height="240"
					icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		deviceListApi,
		filters
	} from '@/api/bluetooth.js'
	export default {
		data() {
			return {
				menuList: [{
					name: '全部',
					id: 0
				}],
				current: 0,
				isShowMenu: false,
				usedId: 0,
				deviceList: [],
				grade_id: '',
				nowTimes: '',
				tipsFont: '', //提示文案
				loadingType: false ,//是否正在运行
				backType: 1, //返回状态
			}
		},
		onLoad(option) {
			this.usedId = option?.usedId
			this.backType = option.backType
			this.getOnScreenList()
		},
		onShow(){
			this.getDeviceList()
		},
		methods: {
			async getOnScreenList() {
				try {
					const list = await filters()
					const data = list.data
					for (var i in data) {
						this.menuList.push({
							id: Number(i),
							name: data[i]
						})
						console.log(11, this.menuList)
					}
				} catch (e) {

				}

			},
			/**
			 * @param {Object} item
			 * @param {Object} index
			 */

			onScreen(item, index) {
				this.current = index
				this.grade_id = item.id ? item.id : ''
				this.isShowMenu = false
				this.getDeviceList()
			},
			handleClick(condition, id) {
				if(this.usedId && this.usedId == id){
					return false
				}
				if (condition) {
					uni.navigateTo({
						url: `./example/propDetails?id=${id}&type=${condition}`
					})
				} else {
					this.toAcivation(id)
				}

			},
			toMassage(id) {
				if(this.usedId && this.usedId == id){
					return false
				}
				uni.navigateTo({
					url: `./ready?id=${id}&backType=1`
				})
			},
			toFixed(id) {
				uni.navigateTo({
					url: `./example/propDetails?id=${id}&type=2`
				})
			},
			toAcivation(id) {
				uni.navigateTo({
					url: `/pages/town/ready?id=${id}&backType=1`
				})
			},
			//返回上一页
			back() {
				if(this.backType == 1){
					uni.switchTab({
						url:'/pages/town/index'
					})
				} else {
					uni.navigateBack()
				}
			},
			async getDeviceList() {
				this.loadingType = false
				uni.showLoading()
				try {
					this.deviceList = []
					const res = await deviceListApi({
						grade_id: this.grade_id
					})
					// condition 0. 未激活 1. 已激活 2.已过期
					this.nowTimes = Math.ceil(new Date().getTime() / 1000)
					res.data.forEach(item => {
						item.condition = item.expiration_time === 0 ? 0 : this.nowTimes < item.expiration_time ? 1 : 2
						switch (item.condition) {
							case 0:
								item.restDay = item.grade_expiration_time
								break;
							case 1:
								item.restDay = Math.ceil((item.expiration_time - this.nowTimes) / (3600 * 24))
								break;
							case 2:
								item.restDay = 0
								break;
						}
					})
					this.deviceList = res.data
					if(!this.deviceList.length){
						this.loadingType = true
						if(this.grade_id){
							this.tipsFont = '暂无此品阶道具噢'
						} else {
							this.tipsFont = '暂无道具'
						}
					}
					uni.hideLoading()
				} catch (e) {
					console.log(e)
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style>
	page{
		background: #F0F4F7!important;
	}
</style>
<style lang="scss">
	.screenSuccess {
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 1;
	}

	.device {

		.menu {
			box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.08);
			border-radius: 4px 4px 4px 4px;
			padding: 0 8rpx;
			position: absolute;
			top: 45rpx;
			right: 0;
			background-color: white;

			&:after {
				content: '';
				position: absolute;
				border: 12rpx solid transparent;
				border-bottom-color: #ffffff;
				top: -20rpx;
				right: 10rpx;
			}

			.menu-item {
				width: 108rpx;
				padding: 8rpx 0;
				border-bottom: 1px solid rgba(0, 0, 0, 0.02);
			}
		}

		.grey {
			color: #8F9091;
		}

		.list {
			flex-wrap: wrap;
		}

		.used {
			opacity: 0.6;
		}

		.device-item {
			background-color: rgba(255, 255, 255, .5);
			border-radius: 16rpx;
			width: 48%;
			overflow: hidden;

			.up {
				background-color: white;
				height: 296rpx;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				>image {
					width: 200rpx;
					height: 220rpx;
				}

				.tip {
					background: rgba(92, 201, 255, .2);
					font-size: 10px;
					padding: 4rpx 15rpx;
					border-radius: 20rpx;
					position: absolute;
					left: 6rpx;
					top: 6rpx;
				}

				.tip2 {
					position: absolute;
					color: white;
					font-size: 9px;
					top: -60rpx;
					transform: rotate(-135deg);
					right: -60rpx;

					.tip2-text {
						position: absolute;
						color: white;
						font-size: 10px;
						transform: translateX(-50%) rotate(90deg);
						bottom: 14rpx;
						left: 50%;
						line-height: 10px;
					}
				}

				.inactive {
					border: 60rpx solid #000000;
					border-color: rgba(92, 201, 255, .7) transparent transparent transparent;
				}

				.expires {
					filter: grayscale(1);
				}
			}

			.down {
				padding: 24rpx;

				::v-deep .u-line-progress__line {
					background: linear-gradient(90deg, #8CD3F5 0%, #C4EFFA 100%) !important;
				}

				.progress {
					border: 1px solid #EDF0F6;
					padding: 4rpx;
					border-radius: 20rpx;
					background-color: white;
					position: relative;

					.percentage {
						position: absolute;
						left: 0;
						bottom: 0;
						top: 0;
						right: 0;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}

	}
</style>
